<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>nodes list</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/static/super_cmdb/css/font.css">
    <link rel="stylesheet" href="/static/super_cmdb/css/xadmin.css">
    <style>
      .hide{
        display: none;
      }
    </style>
  </head>

  <body class="layui-anim layui-anim-up">
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">用户列表</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:33px">ဂ</i></a>
    </div>
    <div class="x-body">
      <xblock>
          <li class="layui-nav-item">
            <form method="post" id="GroupForm" onchange="submitGroupForm()">
                {% csrf_token %}
                <select id="" name="group_id" style="height: 30px;border: 0;width: 200px">
                    <option value="" id="blink">{{ select_group_name }}</option>
                    {% for group in group_list %}
                        <option value="{{ group.id }}">{{ group.group_name }}</option>
                    {% endfor %}
                </select>
            </form>
          </li>
      </xblock>

      <xblock>
          <form method="post" id="yaml_filter" onchange="submitForm_yaml_filter()">
              {% csrf_token %}
              <input style="width: 350px;height: 30px;border-radius: 7px;border: 0px;background-color: #e2e2f5;" placeholder="Filter: server_id |服务器名称 |yaml文件名 |namespace " name="yaml_filter" value="{{ yaml_filter }}" >
          </form>
      </xblock>
      <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加yaml','/k8s/yaml_add/',)"><i class="layui-icon"></i>添加yaml</button>
        <button class="layui-btn" style="background-color: #259cbd" onclick="remove_hide_i11()">批量操作yaml</button>
        <button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon"></i>批量删除</button>
        <span class="x-right" style="line-height:40px">共有yaml：{{ yaml_list.count }} 个</span>
      </xblock>

    <!-- 遮罩层部分start -->
    <div id="i2" class="hide"></div>
    <!-- 遮罩层部分end -->

    <!-- 弹出框部分start i11 -->
    <div id="i11" class="hide">
        <div style="padding-top: 30px;color: green;font-size: 20px;padding-bottom: 20px;">
            <span>批量操作选中yaml</span>
        </div>

        <div class="layui-form-item">
            <label for="script_type" class="layui-form-label" style="width: 120px">
                <span class="x-red">*</span>执行任务类型
            </label>
            <div class="layui-input-inline" style="width: 520px;">
                <select id="script_type" name="script_type" style="height: 38px;">
                    {% for script_type in script_type_list %}
                        <option value="{{ script_type.0 }}">{{ script_type.0 }} --> {{ script_type.1 }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>


        <hr>
        <button class="layui-btn" onclick="OpsAll()">开始执行</button>
        <button class="layui-btn" onclick="add_hide_i11()">取消</button>
    </div>
    <!-- 弹出框部分end i11-->

      <table class="layui-table" id="table1">
        <thead>
          <tr>
            <th>
            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th>server_id</th>
            <th>服务器名称</th>
            <th>yaml文件名</th>
            <th>yaml模板</th>
            <th>namespace</th>
            <th>deployment_name</th>
            <th>replicas</th>
            <th>yaml详情</th>
            <th>部署状态</th>
            <th>运行状态</th>
            <th>Pod地址[不固定]</th>
            <th>访问端口</th>
            <th>更新时间</th>
            <th>操作</th>
        </thead>
        <tbody>
            {% for yaml in yaml_list %}
              <tr>
                <td style="width: 20px;">
                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{{ yaml.id }}'><i class="layui-icon">&#xe605;</i></div>
                </td>
                <td>
                    <span>{{ yaml.server_id }}</span>
                </td>
                <td>{{ yaml.server_name }}</td>
                <td>{{ yaml.yaml_name }}</td>
                <td>{{ yaml.template}}</td>
                <td>{{ yaml.namespace }}</td>
                <td>{{ yaml.deployment_name }}</td>
                <td>{{ yaml.replicas }}</td>
                <td>
                    <a title="查看详情" style="color: green;" onclick="x_admin_show('查看详情','/k8s/yaml_detail-{{ yaml.id }}')" href="javascript:;">查看详情</a>
                </td>
                {% if yaml.deploy_status == 2 %}
                    <td style="color: yellowgreen">{{ yaml.get_deploy_status_display }}</td>
                {% elif yaml.deploy_status == 3 %}
                    <td style="color: red">{{ yaml.get_deploy_status_display }}</td>
                {% else %}
                    <td>{{ yaml.get_deploy_status_display }}</td>
                {% endif %}
                {% if yaml.status == "Running" %}
                    <td style="color: yellowgreen">{{ yaml.status }}</td>
                {% else %}
                    <td style="color: red">{{ yaml.status }}</td>
                {% endif %}
                <td>{{ yaml.pod_ip }}</td>
                <td>{{ yaml.nodePort_list }}</td>
                <td>{{ yaml.update_time|date:"Y-m-d H:i:s" }}</td>
                <td class="td-manage">

                  <button style="background-color: #0fbd8c;" id="btn" class="layui-btn layui-btn-xs"  onclick="apply(this,'{{ yaml.server_id }}')" href="javascript:;" title="部署">deploy</button>
                  <button id="btn" class="layui-btn layui-btn-xs"  onclick="update(this,'{{ yaml.server_id }}')" href="javascript:;" title="更新">update</button>
                  <button style="background-color: #d46612" id="btn" class="layui-btn layui-btn-xs" onclick="stop(this,'{{ yaml.server_id }}')" href="javascript:;" title="Change replicas to 0" >stop</button>
                  <button style="background-color: #0a67fb" id="btn" class="layui-btn layui-btn-xs"  onclick="start(this,'{{ yaml.server_id }}')" href="javascript:;" title="Change replicas to {replicas}" >start</button>
                  <button id="btn" class="layui-btn layui-btn-xs"  onclick="x_admin_show('编辑','/k8s/yaml_edit-{{ yaml.id }}')" href="javascript:;" style="background-color: #144c68" title="编辑">edit</button>
                  <button id="btn" class="layui-btn-danger layui-btn layui-btn-xs"  onclick="del(this, '{{ yaml.server_id }}')" href="javascript:;" title="删除">delete</button>

                </td>
              </tr>
            {% endfor %}
        </tbody>
      </table>

        <div class="page">
            {% for page_str in page_list %}
                {{ page_str|safe }}
            {% endfor %}
        </div>

    </div>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/xadmin.js"></script>
    <script src="/static/super_cmdb/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/super_cmdb/js/jquery.cookie.js"></script>
    <script>
        //表格选中着色
        var trs = document.getElementById('table1').getElementsByTagName('tr');
        window.onload = function(){
            for( var i=0; i<trs.length; i++ ){
                trs[i].onmousedown = function(){
                    tronmousedown(this);
                }
            }
        };
        function tronmousedown(obj){
            for( var o=0; o<trs.length; o++ ){
                if( trs[o] == obj ){
                    trs[o].style.backgroundColor = 'rgb(174, 212, 234)';
                }
                else{
                    trs[o].style.backgroundColor = '';
                }
            }
        }

        //去除遮罩层i11
        function remove_hide_i11() {
            document.getElementById("i2").classList.remove("hide");
            document.getElementById("i11").classList.remove("hide");
        }
        //添加遮罩层i11
        function add_hide_i11() {
            document.getElementById("i2").classList.add("hide");
            document.getElementById("i11").classList.add("hide");
        }

        $(function () {
            $.ajaxSetup({
                beforeSend:function (xhr,settings) {
                    xhr.setRequestHeader("X-CSRFtoken",$.cookie("csrftoken"));
                }
            })
        });

        function submitGroupForm(){
            //获取form表单对象,提交选择项目
            var form = document.getElementById("GroupForm");
            form.submit();//form表单提交
        }

        function submitForm_yaml_filter(){
            //获取form表单对象,提交选择项目
            var form = document.getElementById("yaml_filter");
            form.submit();//form表单提交
        }

        $(function () {
           var v = $.cookie("per_page_count");
           console.log(v)
           $("#pg").val(v);
        });
        function changePageSize(ths) {
            var current_page = $(ths).val();
            console.log(current_page);
            $.cookie("per_page_count", current_page);
            location.reload();
        }


      layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });

       /*用户-停用*/
      function member_stop(obj,id){
          layer.confirm('确认要停用吗？',function(index){

              if($(obj).attr('title')=='启用'){

                //发异步把用户状态进行更改
                $(obj).attr('title','停用')
                $(obj).find('i').html('&#xe62f;');

                $(obj).parents("tr").find(".td-status").find('span').addClass('layui-btn-disabled').html('已停用');
                layer.msg('已停用!',{icon: 5,time:1000});

              }else{
                $(obj).attr('title','启用')
                $(obj).find('i').html('&#xe601;');

                $(obj).parents("tr").find(".td-status").find('span').removeClass('layui-btn-disabled').html('已启用');
                layer.msg('已启用!',{icon: 5,time:1000});
              }

          });
      }

      /*用户-删除*/
      function member_del(obj,id){
          layer.confirm('确认要删除吗？',function(index){
              //发异步删除数据
              var url = "/super_cmdb//";
              //console.log(url);
              $.ajax({
                    url: url,
                    type: "POST",
                    //data: $('#layui-form').serialize(),
                    data: {"user_id":id},
                    success: function (data) {
                        //console.log(data);
                    }
                });
              $(obj).parents("tr").remove();
              layer.msg('已删除!',{icon:1,time:1000});
          });
      }

      /*部署apply*/
      function apply(obj, id){
          $("#btn").attr("disabled", true); //点击按钮后使按钮暂时失效
          layer.confirm('确认要部署游戏吗？'+id,function(index){
              //发异步删除数据
              layer.msg("部署中，请等待...",{icon:3,time:80000});
              $.ajax({
                    url: "/k8s/yaml_apply/",
                    type: "POST",
                    data: {"server_id":id,"ops_type":"apply"},
                    success: function (message) {
                        console.log(message)
                        if (message.code == 0 ){
                            layer.msg(message.msg + id,{icon:1,time:80000});
                        } else {
                            layer.msg(message.msg + id,{icon:2,time:80000});
                        }
                    }
                });
          });
          $("#btn").attr("disabled", false); //使按钮暂时生效
      }

      /*更新update*/
      function update(obj, id){
          $("#btn").attr("disabled", true); //点击按钮后使按钮暂时失效
          layer.confirm('确认要更新游戏吗？'+id,function(index){
              //发异步删除数据
              layer.msg("更新中，请等待...",{icon:3,time:80000});
              $.ajax({
                    url: "/k8s/yaml_update/",
                    type: "POST",
                    data: {"server_id":id,"ops_type":"update"},
                    success: function (message) {
                        console.log(message)
                        if (message.code == 0 ){
                            layer.msg(message.msg + id,{icon:1,time:80000});
                        } else {
                            layer.msg(message.msg + id,{icon:2,time:80000});
                        }
                    }
                });
          });
          $("#btn").attr("disabled", false); //使按钮暂时生效
      }

      /*停止stop*/
      function stop(obj, id){
          $("#btn").attr("disabled", true); //点击按钮后使按钮暂时失效
          layer.confirm('确认要停止游戏吗？'+id,function(index){
              //发异步删除数据
              layer.msg("停止中，请等待...",{icon:3,time:80000});
              $.ajax({
                    url: "/k8s/yaml_ops/",
                    type: "POST",
                    data: {"server_id":id,"ops_type":"stop"},
                    success: function (message) {
                        console.log(message)
                        if (message.code == 0 ){
                            layer.msg(message.msg + id,{icon:1,time:80000});
                        } else {
                            layer.msg(message.msg + id,{icon:2,time:80000});
                        }
                    }
                });
          });
          $("#btn").attr("disabled", false); //使按钮暂时生效
      }

      /*启动start*/
      function start(obj, id){
          $("#btn").attr("disabled", true); //点击按钮后使按钮暂时失效
          layer.confirm('确认要启动游戏吗？'+id,function(index){
              //发异步删除数据
              layer.msg("启动中，请等待...",{icon:3,time:80000});
              $.ajax({
                    url: "/k8s/yaml_ops/",
                    type: "POST",
                    data: {"server_id":id,"ops_type":"start"},
                    success: function (message) {
                        console.log(message)
                        if (message.code == 0 ){
                            layer.msg(message.msg + id,{icon:1,time:80000});
                        } else {
                            layer.msg(message.msg + id,{icon:2,time:80000});
                        }
                    }
                });
          });
          $("#btn").attr("disabled", false); //使按钮暂时生效
      }

      /*删除del*/
      function del(obj, id){
          $("#btn").attr("disabled", true); //点击按钮后使按钮暂时失效
          layer.confirm('确认要删除游戏吗？'+id,function(index){
              //发异步删除数据
              layer.msg("删除中，请等待...",{icon:3,time:80000});
              $.ajax({
                    url: "/k8s/yaml_delete/",
                    type: "POST",
                    data: {"server_id":id,"ops_type":"delete"},
                    success: function (message) {
                        console.log(message)
                        if (message.code == 0 ){
                            layer.msg(message.msg + id,{icon:1,time:80000});
                        } else {
                            layer.msg(message.msg + id,{icon:2,time:80000});
                        }
                    }
                });
          });
          $("#btn").attr("disabled", false); //使按钮暂时生效
      }

      function delAll (argument) {

        var data = tableCheck.getData();

        layer.confirm('确认要删除选中项吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            var url = "/super_cmdb//";
              $.ajax({
                    url: url,
                    type: "POST",
                    //data: $('#layui-form').serialize(),
                    data: {"user_id":JSON.stringify(data)}, //将data转换成字符串才能提交到后端
                    success: function (data) {
                        //console.log(data);
                    }
                });
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }

      function OpsAll (argument) {
        var data = tableCheck.getData();
        if (data == "") {
            alert("未选择需要操作的游戏服");
            return false;
        }
        var url = "/k8s/yaml_batch_ops/";
        var script_type = $("#script_type").val();

        layer.confirm('确认要操作选中的游戏服吗？'+data,function(index){
            //捉到所有被选中的，发异步进行操作
            layer.msg("操作中，请等待...",{icon:3,time:80000});
            $.ajax({
                url: url,
                type: "POST",
                //data: $('#layui-form').serialize(),
                data: {
                    "yaml_id": JSON.stringify(data),
                    "script_type": script_type,
                }, //将data转换成字符串才能提交到后端
                success: function (message) {
                    console.log(message)
                    if (message.code == 0 ){
                        layer.msg(message.msg,{icon:1,time:80000});
                    } else {
                        layer.msg(message.msg,{icon:2,time:80000});
                    }
                }
            });
        });
      }
    </script>
  </body>

</html>
